<template>
	<view>
		<button @click="login">登录页面</button>
		<div id="myImageContainer">
			<button @click="downloadImage">下载加水印图片</button>
			<image style="width: 200px; height: 200px; background-color: #eeeeee;" :src="addwaterUrl" alt="" />
		</div>
		<uni-file-picker v-model="imageValue.tempFiles" file-mediatype="image" mode="grid" file-extname="png,jpg"
			:limit="1" @select="select" />
		<switch checked @change="switch1Change" />
	</view>
</template>
<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	const addwaterUrl = ref('https://preview.qiantucdn.com/58pic/22/91/38/05M58PICj58PIC6Ng5ed37Tb9_PIC2018.jpg!w1024_new_small_1') // 加水印图片的URL
	const imageValue = reactive({
		tempFiles: {}
	})
	const downloadImage = () => { // 下载加水印图片的方法
		addWatermark(); // 调用添加水印的方法
	}
	const addWatermark = (src = addwaterUrl) => { // 添加水印的方法

		console.log("图片", src)
		const img = new Image(); // 创建一个新的图片对象
		let data = new Date(); // 获取当前时间
		img.crossOrigin = "Anonymous"; // 设置图片跨域为匿名
		// img.src = src.value as any; // 设置图片源为需要加水印的图片URL
		img.src = src.value
		img.onload = () => { // 当图片加载完成后执行
			const canvas = document.createElement("canvas"); // 创建一个新的画布对象
			canvas.width = img.width; // 设置画布宽度为图片宽度
			canvas.height = img.height; // 设置画布高度为图片高度
			const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; // 获取画布的2D上下文
			ctx.drawImage(img, 0, 0, img.width, img.height); // 将图片绘制到画布上
			const minDimension = Math.min(img.width, img.height); // 计算图片的最小边长
			const fontSize = Math.floor(minDimension / 20); // 设置字体大小为最小边长的1/20
			ctx.font = 'bolder ' + fontSize + "px PingFangSC-Regular, PingFang SC"; // 设置字体样式
			ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // 设置填充颜色为半透明的白色
			let resultText = drawingWatermark(img.height, img.width); // 调用绘制水印文字的方法
			resultText.forEach(function (value) { // 遍历水印文字的位置
				ctx.save(); // 保存当前绘图状态
				ctx.translate(value.x, value.y); // 将坐标原点移动到水印文字位置
				ctx.rotate(Math.PI / 4); // 旋转45度（弧度制）
				ctx.globalAlpha = 0.9; // 设置透明度为0.2
				ctx.fillText("水印文字", 0, 0); // 填充水印文字
				ctx.restore(); // 恢复之前保存的绘图状态
			});
			// 第二次描边
			ctx.strokeStyle = "rgba(18, 69, 155, 1)"; // 设置描边颜色为蓝色
			ctx.lineWidth = 2; // 设置描边宽度为2
			let resultText2 = drawingWatermark(img.height, img.width); // 再次调用绘制水印文字的方法
			resultText2.forEach(function (value) { // 再次遍历水印文字的位置
				ctx.save(); // 保存当前绘图状态
				ctx.translate(value.x, value.y); // 将坐标原点移动到水印文字位置
				ctx.globalAlpha = 0.9; // 设置透明度为0.2
				ctx.rotate(Math.PI / 4); // 旋转45度（弧度制）
				ctx.strokeText("水印文字", 0, 0); // 描边水印文字
				ctx.restore(); // 恢复之前保存的绘图状态
			});
			addwaterUrl.value = canvas.toDataURL(); // 将画布内容转换为DataURL
			console.log("213")
		};

		function drawingWatermark(height : number, width : number) : { x : number; y : number }[] { // 绘制水印文字的方法
			let result : { x : number; y : number }[] = []; // 存储水印文字位置的数组
			const rowCount = 5; // 水印文字的行数
			const colCount = 3; // 水印文字的列数
			const marginX = width / colCount; // 水印文字的水平间距
			const marginY = height / rowCount; // 水印文字的垂直间距
			for (let i = 0; i < rowCount; i++) { // 遍历行
				for (let j = 0; j < colCount; j++) { // 遍历列
					let value : { x : number; y : number } = {
						x: 0,
						y: 0
					}; // 存储水印文字位置的临时对象
					value.x = j * marginX; // 设置水印文字的水平位置
					value.y = i * marginY; // 设置水印文字的垂直位置
					result.push(value); // 将水印文字位置添加到数组中
				}
			}
			return result; // 返回水印文字位置数组
		}
	}


	// 默认开关
	const switch1Change = (e : any) => {
		console.log("zhixingle ", e.detail.value)
	}
	// 获取上传状态
	function select(e : any) {
		console.log("zhixingle", e.tempFilePaths)
		addWatermark(e.tempFilePaths[0])
		imageValue.tempFiles = e.tempFiles
	}

	const login = () => {
		uni.switchTab({
			url: "/pages/center/index",
		});
	};

	//获取用户身份凭证token
	// const getToken = async (code : string) => {
	// 	const result = await ajax.reqToken(code);
	// 	if (result.code == 200) {
	// 		uni.setStorageSync("TOKEN", result.data.token);
	// 		//返回上一页
	// 		uni.navigateBack();
	// 	}
	// };
</script>
<style lang="less" scoped>
	.login_container {
		img {
			width: 100%;
			height: 100vh;
		}
	}
</style>